<script setup>
  import { computed } from 'vue'
  import Task from './Task.vue'
  import Business from './Business.vue'
  import Project from './Project.vue'
  import { useSaleFileStore } from '@/stores/saleFiles'

  const props = defineProps({
    node: Object,
    level: { type: Number, default: 1 },
  })

  const NODE_COMPONENTS = {
    invoice: Task,
    estimation: Task,
    internalinvoice: Task,
    internalestimation: Task,
    cancelinvoice: Task,
    internalcancelinvoice: Task,
    business: Business,
    project: Project,
  }

  const store = useSaleFileStore()
  const requirements = computed(() => store.getIndicators(props.node))
  const free_files = computed(() => store.getFreeFiles(props.node))

  // Composant dynamique que l'on va présenter en fonction du type de node
  const widget = computed(() => NODE_COMPONENTS[props.node.type_])
</script>
<template>
  <component
    :is="widget"
    :node="node"
    :key="node.id"
    :requirements="requirements"
    :free_files="free_files"
    :level="level"
  />
</template>
